<template>
	<view>
		<view class="middle">
			<view @click="yuyin()">设置</view>
			<view @click="tueichu()">退出账号</view>
		</view>


		<!-- 弹窗 -->
		<view class="screenshot" v-show="notification">
			<view class="screenshot_key">
				<!-- <image src="../../static/iocn7.png"  @click="guanbi()"></image> -->
				<uni-icons type="closeempty" size="30" @click="guanbi()" class="image_gb"></uni-icons>
				<view class="screen_top">
					<view>安全退出</view>
					<text>请确认是否退出当前登录账号</text>
				</view>
				<view class="screen_box">
					<view class="boxte" @click="guanbi()">取消</view>
					<view @click="tuichu()">确定</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				notification: false
			};
		},
		methods: {
			tueichu() {
				this.notification = true
			},
			guanbi() {
				this.notification = false
			},
			tuichu() {
				// var keys=['wxOpenId','mobile','roles']
				uni.removeStorage({
					key: 'id',
					success: function(res) {
						console.log(res, 'res')
						uni.reLaunch({
							url:'/pages/Loginas/logon'
						})

					},
					fail: function(res) {
						// 删除失败
					}
				})

			},
			yuyin(){
				uni.navigateTo({
					url:'/pages/PersonalCenter/yuyin'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 20upx 0;
	}

	.middle {
		background-color: #fff;
		padding: 0 15upx;

		view {
			width: 100%;
			height: 100upx;
			border-bottom: 1upx solid #e5e5e5;
			padding: 0 30upx;
			font-size: 28upx;
			font-weight: bold;
			line-height: 100upx;
		}
	}

	.screenshot {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		.screenshot_key {
			width: 676.4upx;
			height: 420upx;
			opacity: 1;
			background: #FFFFFF;
			box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 20upx;
			padding: 50upx 70upx;

			.image_gb {
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: 18upx;
				right: 68upx;
			}

			.screen_top {
				view {
					font-size: 35upx;
					font-weight: bold;
					padding-bottom: 30upx;
					border-bottom: 2upx solid #e5e5e5;
				}

				text {
					display: block;
					font-size: 28upx;
					color: #383838;
					line-height: 60upx;
					padding-top: 30upx;
				}
			}

			.screen_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 70upx;

				view {
					width: 231upx;
					height: 72upx;
					border-radius: 20upx;
					background-color: #F04D3E;
					text-align: center;
					line-height: 72upx;
					font-size: 31upx;
					font-weight: bold;
					color: #fff;
				}

				.boxte {
					background-color: #e5e5e5;
					color: #000;
				}
			}
		}
	}
</style>
